<template>
  <div v-if="showCurrentConversation && conversationList.length > 0" class="msgHeader">
    <div>
      <img :src="currentConversation.userProfile.avatar || require('../../../assets/img/sex1.png')" alt="" />
      <span v-if="currentConversation.type === TIM.TYPES.CONV_C2C">{{ currentConversation.userProfile.nick || currentConversation.userProfile.userID }}</span>
      <span v-else-if="currentConversation.type === TIM.TYPES.CONV_GROUP"> {{ currentConversation.groupProfile.name || currentConversation.groupProfile.groupID}}</span>
      <span v-else-if="currentConversation.type === TIM.TYPES.CONV_SYSTEM">系统通知</span>
    </div>
    <div>
      <i @click="delectUser(chat_userinfo.is_im_attention)" v-show="chat_userinfo.is_im_attention != 0" class="el-icon-delete-solid"></i>
      <i @click="delectUser(chat_userinfo.is_im_attention)" v-show="chat_userinfo.is_im_attention == 0" class="el-icon-plus"></i>
      <!-- <i class="el-icon-more"></i> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    baseMsg: Object,
  },
  data() {
    return {
      is_attention: 1,
      userid: "",
    };
  },
  computed: {
    ...mapState({
      chat_userinfo: (state) => state.conversation.chat_userinfo,
      currentConversation: (state) => state.conversation.currentConversation,
      conversationList: (state) => state.conversation.conversationList,
    }),
    showCurrentConversation() {
      return !!this.currentConversation.conversationID;
    },
  },
  chat_userinfo(old) {
    this.index = 0;
    // this.index = 0;
    console.log("ballll", old);
    if (!old.uid) {
      this.$swal("请检查当前用户是否存在", "出错啦！", "error");
    } else {
      if (
        old.is_im_attention == "" ||
        old.is_im_attention == null ||
        old.is_im_attention == undefined ||
        old.is_im_attention == 0
      ) {
        this.is_attention = 0; //未关注
      } else {
        this.is_attention = 1; //已关注
      }
    }
  },
  mounted() {
    this.userid = this.chat_userinfo.id;
    console.log("kkk", this.chat_userinfo.is_im_attention);
  },
  methods: {
    delectUser(tag) {
      let params = {};
      console.log("id", this.chat_userinfo, this.chat_userinfo.id);
      params.id = this.chat_userinfo.id;
      if (tag == 0) {
        params.is_im_attention = 1;
        this.changeCheckStatus(params);
      } else {
        // 不再关注该用户
        this.$confirm("确定要取关该用户吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          params.is_im_attention = 0;
          this.changeCheckStatus(params);
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        });
      }
    },
    getUserInfo(imuid) {
      var params = {};
      let text = "inex_" + imuid.id;
      params.im_uid = text;
      this.$api.getim.getImUserInfo(params).then((res) => {
        if (res.data.code == 200) {
          this.user = res.data.result;
          if (res.data.result.id) {
            this.userid = res.data.result.id;
            this.$store.commit("set_chat_userinfo", res.data.result);
            console.log("endd", res.data.result);
            if (!res.data.result.uid) {
              // this.$swal("请检查当前用户是否存在", "出错啦！", "success");
            } else {
              if (
                res.data.result.is_im_attention == "" ||
                res.data.result.is_im_attention == null ||
                res.data.result.is_im_attention == undefined ||
                res.data.result.is_im_attention == 0
              ) {
                this.is_attention = 0; //未关注
              } else {
                this.is_attention = 1; //已关注
              }
            }

            // this.$bus.$emit("toUserInfo", res.data.result);
          }
        }
      });
    },
    async changeCheckStatus(obj) {
      let params = { ...obj };
      let res = await this.$api.getim.im_attention(params);
      console.log("aaa", res);
      if (res.data.code == 200) {
        this.getUserInfo(params);
        this.$fnc.alertSuccess("操作成功");
      } else {
        this.$fnc.alertError("操作失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.msgHeader {
  height: 65px;
  width: 100%;
  background-color: skyblue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  background-color: rgb(242, 244, 245);
  border-bottom: 2px solid rgb(208, 216, 224);
  box-shadow: 0 0 5px #ccc;
  padding: 0 15px;
  position: absolute;
  top: 0;
  > div:nth-child(1) {
    display: flex;
    align-items: center;
    > img {
      width: 50px;
      height: 50px;
      border-radius: 5px;
    }
    span {
      color: rgb(20, 23, 56);
      margin-left: 10px;
    }
  }
  > div:nth-child(2) {
    color: rgb(189, 201, 210);
    i {
      margin: 0 8px;
      font-size: 22px;
      cursor: pointer;
    }
  }
}
</style>
